<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钓鱼计时 - 钓鱼小程序</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* 移动端滚动条优化 - 隐藏滚动条 */
        ::-webkit-scrollbar {
            display: none;
        }
        
        * {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f7fa;
            padding-bottom: 60px;
            padding-top: 50px;
            color: #333;
            line-height: 1.6;
            max-width: 375px;
            margin: 0 auto;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .header {
            /* background: rgba(255,255,255,0.1); */
            background: #0ba8dd;
            backdrop-filter: blur(10px);
            color: white;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            justify-content: space-between;
        }

        .back-btn {
            background: none;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
        }

        .header h1 {
            font-size: 18px;
            font-weight: 600;
            flex: 1;
            text-align: center;
        }

        .main-content {
            flex: 1;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .venue-info {
            background: rgba(255,255,255,0.9);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 20px;
            text-align: center;
            width: 100%;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }

        .venue-name {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
        }

        .venue-location {
            font-size: 14px;
            color: #666;
        }

        .timer-container {
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 20px;
            text-align: center;
            width: 100%;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
        }

        .timer-display {
            font-size: 48px;
            font-weight: 700;
            color: #3498DB;
            margin-bottom: 16px;
            font-family: 'Courier New', monospace;
            letter-spacing: 2px;
        }

        .timer-status {
            font-size: 16px;
            color: #666;
            margin-bottom: 20px;
        }

        .timer-controls {
            display: flex;
            gap: 12px;
            justify-content: center;
        }

        .control-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 25px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }

        .start-btn {
            background: #27ae60;
            color: white;
        }

        .pause-btn {
            background: #f39c12;
            color: white;
        }

        .stop-btn {
            background: #e74c3c;
            color: white;
        }

        .control-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }

        .session-info {
            background: rgba(255,255,255,0.9);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 20px;
            width: 100%;
        }

        .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .info-item {
            text-align: center;
        }

        .info-label {
            font-size: 12px;
            color: #666;
            margin-bottom: 4px;
        }

        .info-value {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }

        .catch-record {
            background: rgba(255,255,255,0.9);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 20px;
            width: 100%;
        }

        .record-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .record-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }

        .add-catch-btn {
            background: #3498DB;
            color: white;
            border: none;
            border-radius: 15px;
            padding: 6px 12px;
            font-size: 12px;
            cursor: pointer;
        }

        .catch-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .catch-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background: #f8f9fa;
            border-radius: 8px;
            font-size: 14px;
        }

        .catch-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .fish-icon {
            font-size: 16px;
        }

        .catch-time {
            font-size: 12px;
            color: #666;
        }

        .empty-catch {
            text-align: center;
            color: #999;
            font-size: 14px;
            padding: 20px;
        }

        .weather-info {
            background: rgba(255,255,255,0.9);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 20px;
            width: 100%;
        }

        .weather-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            text-align: center;
        }

        .weather-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .weather-icon {
            font-size: 20px;
        }

        .weather-label {
            font-size: 12px;
            color: #666;
        }

        .weather-value {
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }

        .action-buttons {
            display: flex;
            gap: 12px;
            width: 100%;
        }

        .action-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
        }

        .primary-btn {
            background: rgba(255,255,255,0.9);
            color: #3498DB;
            border: 1px solid rgba(52,152,219,0.3);
        }

        .secondary-btn {
            background: rgba(255,255,255,0.9);
            color: #666;
            border: 1px solid rgba(0,0,0,0.1);
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            background: white;
            border-radius: 12px;
            padding: 20px;
            width: 100%;
            max-width: 300px;
        }

        .modal-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 16px;
            text-align: center;
        }

        .form-group {
            margin-bottom: 12px;
        }

        .form-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 4px;
            display: block;
        }

        .form-input, .form-select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
        }

        .modal-buttons {
            display: flex;
            gap: 12px;
            margin-top: 16px;
        }

        .modal-btn {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
        }

        .confirm-btn {
            background: #3498DB;
            color: white;
        }

        .cancel-btn {
            background: #f5f5f5;
            color: #666;
        }

        /* 小程序胶囊按钮 */
        .capsule-btn {
            background: rgba(255,255,255,0.2);
            border-radius: 16px;
            padding: 6px 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .capsule-btn .dot {
            width: 4px;
            height: 4px;
            background: white;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="header">
        <button class="back-btn">←</button>
        <h1>钓鱼计时</h1>
        <div class="capsule-btn">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>

    <div class="main-content">
        <div class="venue-info">
            <div class="venue-name">碧波湖钓鱼场</div>
            <div class="venue-location">普通钓位 · 全天票</div>
        </div>

        <div class="timer-container">
            <div class="timer-display" id="timerDisplay">00:00:00</div>
            <div class="timer-status" id="timerStatus">准备开始钓鱼</div>
            <div class="timer-controls">
                <button class="control-btn start-btn" id="startBtn" onclick="startTimer()">开始</button>
                <button class="control-btn pause-btn" id="pauseBtn" onclick="pauseTimer()" style="display:none">暂停</button>
                <button class="control-btn stop-btn" id="stopBtn" onclick="stopTimer()" style="display:none">结束</button>
            </div>
        </div>

        <div class="session-info">
            <div class="info-grid">
                <div class="info-item">
                    <div class="info-label">开始时间</div>
                    <div class="info-value" id="startTime">--:--</div>
                </div>
                <div class="info-item">
                    <div class="info-label">当前时间</div>
                    <div class="info-value" id="currentTime">--:--</div>
                </div>
                <div class="info-item">
                    <div class="info-label">钓获数量</div>
                    <div class="info-value" id="catchCount">0条</div>
                </div>
                <div class="info-item">
                    <div class="info-label">预计结束</div>
                    <div class="info-value" id="estimatedEnd">--:--</div>
                </div>
            </div>
        </div>

        <div class="catch-record">
            <div class="record-header">
                <div class="record-title">钓获记录</div>
                <button class="add-catch-btn" onclick="showAddCatchModal()">添加</button>
            </div>
            <div class="catch-list" id="catchList">
                <div class="empty-catch">暂无钓获记录，开始钓鱼吧！</div>
            </div>
        </div>

        <div class="weather-info">
            <div class="weather-grid">
                <div class="weather-item">
                    <div class="weather-icon">🌤️</div>
                    <div class="weather-label">天气</div>
                    <div class="weather-value">多云</div>
                </div>
                <div class="weather-item">
                    <div class="weather-icon">🌡️</div>
                    <div class="weather-label">温度</div>
                    <div class="weather-value">22°C</div>
                </div>
                <div class="weather-item">
                    <div class="weather-icon">💨</div>
                    <div class="weather-label">风力</div>
                    <div class="weather-value">2级</div>
                </div>
            </div>
        </div>

        <div class="action-buttons">
            <button class="action-btn primary-btn">分享战果</button>
            <button class="action-btn secondary-btn">钓鱼技巧</button>
        </div>
    </div>

    <!-- 添加钓获模态框 -->
    <div class="modal" id="addCatchModal">
        <div class="modal-content">
            <div class="modal-title">添加钓获</div>
            <div class="form-group">
                <label class="form-label">鱼类</label>
                <select class="form-select" id="fishType">
                    <option value="鲫鱼">鲫鱼</option>
                    <option value="草鱼">草鱼</option>
                    <option value="鲤鱼">鲤鱼</option>
                    <option value="鲢鱼">鲢鱼</option>
                    <option value="黑鱼">黑鱼</option>
                    <option value="其他">其他</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">重量(斤)</label>
                <input type="number" class="form-input" id="fishWeight" placeholder="请输入重量" step="0.1">
            </div>
            <div class="form-group">
                <label class="form-label">备注</label>
                <input type="text" class="form-input" id="fishNote" placeholder="可选">
            </div>
            <div class="modal-buttons">
                <button class="modal-btn cancel-btn" onclick="hideAddCatchModal()">取消</button>
                <button class="modal-btn confirm-btn" onclick="addCatch()">确认</button>
            </div>
        </div>
    </div>

    <script>
        let timerInterval;
        let startTimestamp;
        let elapsedTime = 0;
        let isRunning = false;
        let catches = [];

        function updateCurrentTime() {
            const now = new Date();
            document.getElementById('currentTime').textContent = 
                now.toLocaleTimeString('zh-CN', { hour12: false }).slice(0, 5);
        }

        function formatTime(seconds) {
            const hours = Math.floor(seconds / 3600);
            const minutes = Math.floor((seconds % 3600) / 60);
            const secs = seconds % 60;
            return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        }

        function startTimer() {
            if (!isRunning) {
                startTimestamp = Date.now() - elapsedTime * 1000;
                const startTime = new Date(startTimestamp);
                document.getElementById('startTime').textContent = 
                    startTime.toLocaleTimeString('zh-CN', { hour12: false }).slice(0, 5);
                
                // 预计8小时后结束
                const estimatedEnd = new Date(startTimestamp + 8 * 60 * 60 * 1000);
                document.getElementById('estimatedEnd').textContent = 
                    estimatedEnd.toLocaleTimeString('zh-CN', { hour12: false }).slice(0, 5);
            }

            isRunning = true;
            document.getElementById('timerStatus').textContent = '钓鱼进行中...';
            document.getElementById('startBtn').style.display = 'none';
            document.getElementById('pauseBtn').style.display = 'inline-block';
            document.getElementById('stopBtn').style.display = 'inline-block';

            timerInterval = setInterval(() => {
                elapsedTime = Math.floor((Date.now() - startTimestamp) / 1000);
                document.getElementById('timerDisplay').textContent = formatTime(elapsedTime);
            }, 1000);
        }

        function pauseTimer() {
            isRunning = false;
            clearInterval(timerInterval);
            document.getElementById('timerStatus').textContent = '已暂停';
            document.getElementById('startBtn').style.display = 'inline-block';
            document.getElementById('pauseBtn').style.display = 'none';
            document.getElementById('startBtn').textContent = '继续';
        }

        function stopTimer() {
            isRunning = false;
            clearInterval(timerInterval);
            document.getElementById('timerStatus').textContent = '钓鱼结束';
            document.getElementById('startBtn').style.display = 'inline-block';
            document.getElementById('pauseBtn').style.display = 'none';
            document.getElementById('stopBtn').style.display = 'none';
            document.getElementById('startBtn').textContent = '重新开始';
            
            // 重置计时器
            elapsedTime = 0;
            document.getElementById('timerDisplay').textContent = '00:00:00';
        }

        function showAddCatchModal() {
            document.getElementById('addCatchModal').classList.add('active');
        }

        function hideAddCatchModal() {
            document.getElementById('addCatchModal').classList.remove('active');
            // 清空表单
            document.getElementById('fishType').value = '鲫鱼';
            document.getElementById('fishWeight').value = '';
            document.getElementById('fishNote').value = '';
        }

        function addCatch() {
            const fishType = document.getElementById('fishType').value;
            const fishWeight = document.getElementById('fishWeight').value;
            const fishNote = document.getElementById('fishNote').value;

            if (!fishWeight) {
                alert('请输入鱼的重量');
                return;
            }

            const catch_ = {
                type: fishType,
                weight: parseFloat(fishWeight),
                note: fishNote,
                time: new Date().toLocaleTimeString('zh-CN', { hour12: false }).slice(0, 5)
            };

            catches.push(catch_);
            updateCatchList();
            updateCatchCount();
            hideAddCatchModal();
        }

        function updateCatchList() {
            const catchList = document.getElementById('catchList');
            
            if (catches.length === 0) {
                catchList.innerHTML = '<div class="empty-catch">暂无钓获记录，开始钓鱼吧！</div>';
                return;
            }

            catchList.innerHTML = catches.map(catch_ => `
                <div class="catch-item">
                    <div class="catch-info">
                        <span class="fish-icon">🐟</span>
                        <span>${catch_.type} ${catch_.weight}斤</span>
                        ${catch_.note ? `<span style="color: #666; font-size: 12px;">(${catch_.note})</span>` : ''}
                    </div>
                    <div class="catch-time">${catch_.time}</div>
                </div>
            `).join('');
        }

        function updateCatchCount() {
            document.getElementById('catchCount').textContent = `${catches.length}条`;
        }

        // 初始化
        updateCurrentTime();
        setInterval(updateCurrentTime, 1000);
    </script>
</body>
</html> 